<script setup lang="ts">
import "@vue-flow/core/dist/style.css";
import "@vue-flow/core/dist/theme-default.css";
import Icon from "./icon.vue";
import { ref, onMounted, onUnmounted, nextTick, watch, onBeforeUnmount, computed } from 'vue';
import { useLayout } from "./useLayout";
import { useShuffle } from "./useShuffle";
import { useSnakeLayout } from "./useSnakeLayout";
import ProcessNode from "./processNode.vue";
import { useRunProcess } from "./useRunProcess";
import AnimationEdge from "./animationEdge.vue";
import { Background } from "@vue-flow/background";
import { Panel, VueFlow, useVueFlow } from "@vue-flow/core";
import { initialEdges, initialNodes } from "./initialElements";
import * as echarts from 'echarts';
import signalRService from '@/api/signalrService';
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Swiper, SwiperSlide } from "swiper/vue";
import SwiperCore from "swiper"; // SwiperCore 是类型和核心
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import state from "~icons/ri/checkbox-blank-circle-fill";

defineOptions({
  name: "Swiper"
});

// 注册 Swiper 模块（必须注册）
SwiperCore.use([Autoplay, Navigation, Pagination]);
const nodes = ref(initialNodes);

const edges = ref(initialEdges);

const cancelOnError = ref(true);

// const shuffle = useShuffle();
const { graph, layout, previousDirection } = useLayout();

// @ts-expect-error
const { run, stop, reset, isRunning } = useRunProcess({ graph, cancelOnError });

// const { fitView } = useVueFlow();
const { fitView, onInit } = useVueFlow();
const { applySnakeLayout } = useSnakeLayout();
const isChartVisible = ref(true);
const { setViewport } = useVueFlow();
// 核心：蛇形布局 + 等下帧后 fitView + 直接 run
async function snakeLayout() {
  await stop();
  reset(nodes.value);
  layout(nodes.value, edges.value, "LR");


  // 1) 蛇形排版
  nodes.value = applySnakeLayout(nodes.value, 4, 0, 290, 160);
  console.log("node.value", nodes.value);
  // 2) 等渲染完成后自适应视图
  await nextTick();
  // 2. 显示画布左上角 (0,0)，缩放级别为 1（可调）
  setViewport({ x: 0, y: 0, zoom: 0.5 });
  // fitView();

  // 3) 启动流程
  run(nodes.value);
}

const currentTime = ref("");

function updateTime() {
  const now = new Date();
  const format = (n: number) => n.toString().padStart(2, "0");
  const weekDays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
  const week = weekDays[now.getDay()]; // 获取星期几
  const date = `${now.getFullYear()}-${format(now.getMonth() + 1)}-${format(now.getDate())}`;
  const time = `${format(now.getHours())}:${format(now.getMinutes())}:${format(now.getSeconds())}`;
  currentTime.value = `${date} ${time} ${week}`;
}

onMounted(() => {
  setInterval(updateTime, 1000); // 每秒更新一次
  // 初始化第一个图表：产量与良率统计图
  const chartDom1 = document.getElementById('qualityChart')!;
  const chart1 = echarts.init(chartDom1);

  const option1 = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      textStyle: { color: '#a0cfff' },
      data: ['合格数量', '不合格数量', '良率']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisLine: { lineStyle: { color: '#a0cfff' } },
      axisLabel: { color: '#a0cfff' },
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: [
      {
        type: 'value',
        name: '数量',
        axisLine: { lineStyle: { color: '#a0cfff' } },
        axisLabel: { color: '#a0cfff' },
        splitLine: { lineStyle: { color: '#1f3b68' } }
      },
      {
        type: 'value',
        name: '良率',
        axisLabel: {
          formatter: '{value} %',
          color: '#a0cfff'
        },
        axisLine: { lineStyle: { color: '#a0cfff' } },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '合格数量',
        type: 'bar',
        barWidth: '30%',
        itemStyle: {
          color: '#4dabf7'
        },
        data: [50, 70, 90, 80, 60, 75, 85]
      },
      {
        name: '不合格数量',
        type: 'bar',
        barWidth: '30%',
        itemStyle: {
          color: '#5c7cfa'
        },
        data: [5, 3, 8, 6, 2, 4, 3]
      },
      {
        name: '良率',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#63e6be'
        },
        itemStyle: {
          color: '#63e6be'
        },
        data: [90, 95, 92, 93, 97, 95, 96]
      }
    ]
  };

  chart1.setOption(option1);

  // 初始化第二个图表：堆叠面积图，显示产线产量对比
  const chartDom2 = document.getElementById('qualityChart2')!;
  const chart2 = echarts.init(chartDom2);

  const option2 = {
    title: {
      left: 'center',
      textStyle: {
        color: '#a0cfff',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['A00001', 'B00001'],
      textStyle: {
        color: '#a0cfff'
      },
      top: 30
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: { lineStyle: { color: '#a0cfff' } },
      axisLabel: { color: '#a0cfff' },
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#a0cfff' } },
      axisLabel: { color: '#a0cfff' },
      splitLine: { lineStyle: { color: '#1f3b68' } }
    },
    series: [
      {
        name: 'A00001',
        type: 'line',
        stack: '总量',
        smooth: true,
        areaStyle: {
          opacity: 0.4,
          color: '#4dabf7'
        },
        lineStyle: {
          color: '#4dabf7'
        },
        itemStyle: {
          color: '#4dabf7'
        },
        data: [10, 22, 28, 43, 49]
      },
      {
        name: 'B00001',
        type: 'line',
        stack: '总量',
        smooth: true,
        areaStyle: {
          opacity: 0.4,
          color: '#63e6be'
        },
        lineStyle: {
          color: '#63e6be'
        },
        itemStyle: {
          color: '#63e6be'
        },
        data: [5, 4, 3, 5, 10]
      }
    ]
  };

  chart2.setOption(option2);

  // 响应式处理
  window.addEventListener('resize', () => {
    chart1.resize();
    chart2.resize();
  });
});


// // 1. 定义设备信息结构（可扩展）
// interface DeviceData {
//   DeviceStatus: boolean
//   HasAlarm: boolean
//   AlarmCode: number
//   CurrentTemp: number
//   StepNumber: number
//   ProductCounter: number
//   DeviceId: number[]
// }

// // 2. 定义表格行格式（用于 dv-scroll-board）
// type TableRow = [string, string, string, string, string, string]

// // 3. 初始化响应式状态
// const data = ref<DeviceData>({
//   DeviceStatus: false,
//   HasAlarm: false,
//   AlarmCode: 0,
//   CurrentTemp: 0,
//   StepNumber: 0,
//   ProductCounter: 0,
//   DeviceId: new Array(30).fill(0)
// })

// const config = ref<{
//   header: string[]
//   data: TableRow[]
//   align: string[]
// }>({
//   header: ['设备状态', '报警状态', '当前温度', '工序编号', '完成数量', '设备ID'],
//   data: [],
//   align: ['center']
// })

// const loading = ref(true)
// const error = ref<string | null>(null)

// // 4. 计算设备ID字符串
// const deviceIdString = computed(() => {
//   const validBytes = data.value.DeviceId.filter(b => b !== 0)
//   return String.fromCharCode(...validBytes)
// })

// // 5. SignalR 数据接收处理
// const handleDataReceived = (newData: Partial<DeviceData> & {
//   tableList?: {
//     DeviceStatus: boolean
//     HasAlarm: boolean
//     AlarmCode: number
//     CurrentTemp: number
//     StepNumber: number
//     ProductCounter: number
//     DeviceId: number[]
//   }[]
// }) => {
//   // 更新当前设备主数据
//   data.value = {
//     DeviceStatus: typeof newData.DeviceStatus === 'boolean' ? newData.DeviceStatus : false,
//     HasAlarm: typeof newData.HasAlarm === 'boolean' ? newData.HasAlarm : false,
//     AlarmCode: typeof newData.AlarmCode === 'number' ? newData.AlarmCode : 0,
//     CurrentTemp: typeof newData.CurrentTemp === 'number' ? newData.CurrentTemp : 0,
//     StepNumber: typeof newData.StepNumber === 'number' ? newData.StepNumber : 0,
//     ProductCounter: typeof newData.ProductCounter === 'number' ? newData.ProductCounter : 0,
//     DeviceId: Array.isArray(newData.DeviceId) ? newData.DeviceId : new Array(30).fill(0)
//   }

//   // 同步更新表格内容（用于 dv-scroll-board 展示单条）
//   config.value.data = [[
//     data.value.DeviceStatus ? '运行中' : '停止',
//     data.value.HasAlarm ? `报警 (代码:${data.value.AlarmCode})` : '正常',
//     `${data.value.CurrentTemp} °C`,
//     `${data.value.StepNumber}`,
//     `${data.value.ProductCounter}`,
//     deviceIdString.value
//   ]]
// }

// // 6. 生命周期钩子注册 SignalR
// onMounted(async () => {
//   try {
//     await signalRService.start()
//     signalRService.onDeviceDataReceived(handleDataReceived)
//   } catch (err: any) {
//     error.value = err.message || String(err)
//   } finally {
//     loading.value = false
//   }
// })

// onBeforeUnmount(() => {
//   signalRService.stop()
// })

type TableRow = string[];

const config = ref<{
  header: string[];
  data: TableRow[];
  align: string[];
  rowNum: number;
}>({
  header: ['设备ID', '设备状态', '报警状态'],
  data: [
    ['DEV-001', '运行中', '正常'],
    ['DEV-002', '待机', '报警'],
    ['DEV-003', '维护中', '正常'],
    ['DEV-004', '运行中', '正常'],
    ['DEV-005', '运行中', '正常'],
    ['DEV-006', '离线', '报警'],
    ['DEV-007', '运行中', '正常'],
    ['DEV-008', '维护中', '正常'],
    ['DEV-009', '待机', '正常'],
    ['DEV-010', '运行中', '报警'],
    ['DEV-011', '运行中', '正常'],
    ['DEV-012', '待机', '报警'],
    ['DEV-013', '维护中', '正常'],
    ['DEV-014', '运行中', '正常'],
    ['DEV-015', '运行中', '正常'],
    ['DEV-016', '离线', '报警'],
    ['DEV-017', '运行中', '正常'],
    ['DEV-018', '维护中', '正常'],
    ['DEV-019', '待机', '正常'],
    ['DEV-020', '运行中', '报警'],
    ['DEV-021', '运行中', '正常'],
    ['DEV-022', '待机', '报警'],
    ['DEV-023', '维护中', '正常'],
    ['DEV-024', '运行中', '正常'],
    ['DEV-025', '运行中', '正常'],
    ['DEV-026', '离线', '报警'],
    ['DEV-027', '运行中', '正常'],
    ['DEV-028', '维护中', '正常'],
    ['DEV-029', '待机', '正常'],
    ['DEV-030', '运行中', '报警']

  ],
  align: ['center'],
  waitTime: 500,    // ✅ 每次滚动间隔时间（单位：毫秒，默认 2000ms）
  rowNum: 7
})

const swiperOptions = ref({
  autoplay: {
    delay: 3000,
    disableOnInteraction: false
  },
  navigation: true
});
</script>

<template>
  <div class="fullscreen-wrapper">
    <el-container class="layout-flow">
      <!-- 顶部标题 -->
      <el-header class="header">
        <div class="title-box">
          <div class="title-text">设备工厂MES</div>
          <dv-decoration5 :dur="2" style="width: 600px; height: 40px;" />
        </div>
        <div class="right-top">
          <div class="workshop-info">第1车间</div>
          <dv-decoration-8 :dur="2" style="width: 200px; height: 40px;" :reverse="true" />
        </div>
      </el-header>

      <!-- 中部主区域：左右分栏 -->
      <el-main class="main-body">
        <el-row :gutter="0" class="main-row">
          <!-- 左边 VueFlow 占 2/3 -- :pan-on-drag="false"不能拖动-->
          <el-col :span="18">
            <div class="vueflow-box">
              <dv-border-box8 :dur="5" style="padding: 0px 10px;">
                <VueFlow style="height: 100%; background-color: transparent;" :nodes="nodes" :edges="edges"
                  @init="snakeLayout" :nodes-draggable="false" :edges-draggable="false" :zoom-on-scroll="false"
                  :pan-on-scroll="false" :selectable="false" :connectable="false" :pan-on-drag="false">
                  <template #node-process="props">
                    <ProcessNode :data="props.data" :source-position="props.sourcePosition"
                      :target-position="props.targetPosition" />
                  </template>

                  <template #edge-animation="edgeProps">
                    <AnimationEdge :id="edgeProps.id" :source="edgeProps.source" :target="edgeProps.target"
                      :source-x="edgeProps.sourceX" :source-y="edgeProps.sourceY" :targetX="edgeProps.targetX"
                      :targetY="edgeProps.targetY" :source-position="edgeProps.sourcePosition"
                      :target-position="edgeProps.targetPosition" />
                  </template>

                  <Background />
                </VueFlow>
              </dv-border-box8>
            </div>
          </el-col>

          <!-- 右边 时间 + 图表 -->
          <el-col :span="6" class="right-panel">
            <div class="timebox">{{ currentTime }}</div>
            <el-card class="data-card1" shadow="hover">
              <template #header>
                <div class="card-title">📡 实时数据</div>
              </template>
              <dv-scroll-board :config="config" class="scroll-board" style="height: 300px;" />
            </el-card>
          </el-col>
        </el-row>
      </el-main>

      <!-- 底部三个折线图（横向排列） -->
      <el-footer class="footer-section">
        <el-row :gutter="0" style="height: 220px">
          <el-col :span="10" style="height: 220px">
            <div style="height: 30px; display: flex; align-items: center; justify-content: center;">
              <span class="custom-span-title">设备生产参数</span>
            </div>
            <el-row style="width: 100%;height: 100%">
              <el-col :span="24">
                <swiper v-bind="swiperOptions" style="height: 162px; overflow: hidden;">
                  <swiper-slide style="height: 100%">
                    <el-row>
                      <el-col :span="6" style="
                      display: flex;
                      flex-direction: column;
                      justify-content: center; /* 让内容整体居中 */
                      align-items: center;     /* 横向居中 */
                      gap: 8px;                /* 控制各行间距 */
                    ">
                        <el-row style="justify-content: center">
                          <span class="custom-span">切片机</span></el-row>
                        <el-row style="justify-content: center">
                          <span style="color: #0f8198">QP78466875</span></el-row>
                        <el-row style="justify-content: center; align-items: center">
                          <el-icon color="#409efc">
                            <HelpFilled />
                          </el-icon>
                          <IconifyIconOffline :icon="state" color="#52c41a" />
                          <span style="color: #0f8198">正在加工</span>
                        </el-row>
                        <el-row style="justify-content: center">
                          <el-avatar shape="square" :size="50" src="src/views/vue-flow/layouting/aa.png" fit="fill" />
                        </el-row>
                      </el-col>
                      <el-col :span="18">
                        <el-descriptions class="el-descriptions-padding" :column="3" direction="vertical" border>
                          <el-descriptions-item label="当前加工硅片" :span="2" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">A000031</el-descriptions-item>
                          <el-descriptions-item label="硅片总量" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">3</el-descriptions-item>
                          <el-descriptions-item label="当前电流" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">10A</el-descriptions-item>
                          <el-descriptions-item label="当前速度" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">30m/s</el-descriptions-item>
                          <el-descriptions-item label="当前扭矩" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">60</el-descriptions-item>
                        </el-descriptions>
                      </el-col>
                    </el-row>
                  </swiper-slide>
                  <swiper-slide style="height: 100%">
                    <el-row>
                      <el-col :span="6" style="
                      display: flex;
                      flex-direction: column;
                      justify-content: space-around;
                    ">
                        <el-row style="justify-content: center">
                          <span class="custom-span">切片机</span></el-row>
                        <el-row style="justify-content: center">
                          <span style="color: #0f8198">QP78466875</span></el-row>
                        <el-row style="justify-content: center; align-items: center">
                          <el-icon color="#409efc">
                            <HelpFilled />
                          </el-icon>
                          <IconifyIconOffline :icon="state" color="#52c41a" />
                          <span style="color: #0f8198">正在加工</span>
                        </el-row>

                        <el-row style="justify-content: center">
                          <el-avatar shape="square" :size="50" src="src/views/vue-flow/layouting/aa.png" fit="fill" />
                        </el-row>
                      </el-col>
                      <el-col :span="18">
                        <el-descriptions class="el-descriptions-padding" :column="3" direction="vertical" border>
                          <el-descriptions-item label="当前加工硅片" :span="2" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">A000031</el-descriptions-item>
                          <el-descriptions-item label="硅片总量" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">3</el-descriptions-item>
                          <el-descriptions-item label="当前电流" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">10A</el-descriptions-item>
                          <el-descriptions-item label="当前速度" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">30m/s</el-descriptions-item>
                          <el-descriptions-item label="当前扭矩" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">60</el-descriptions-item>
                        </el-descriptions>
                      </el-col>
                    </el-row>
                  </swiper-slide>
                  <swiper-slide style="height: 100%">
                    <el-row>
                      <el-col :span="6" style="
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      justify-content: flex-start;
                      gap: 4px;
                    ">
                        <el-row style="justify-content: center">
                          <span class="custom-span">切片机</span></el-row>
                        <el-row style="justify-content: center">
                          <span style="color: #0f8198">QP78466875</span></el-row>
                        <el-row style="justify-content: center; align-items: center">
                          <el-icon color="#409efc">
                            <HelpFilled />
                          </el-icon>
                          <IconifyIconOffline :icon="state" color="#52c41a" />
                          <span style="color: #0f8198">正在加工</span>
                        </el-row>
                        <el-row style="justify-content: center">
                          <el-avatar shape="square" :size="50" src="src/views/vue-flow/layouting/aa.png" fit="fill" />
                        </el-row>
                      </el-col>
                      <el-col :span="18">
                        <el-descriptions class="el-descriptions-padding" :column="3" direction="vertical" border>
                          <el-descriptions-item label="当前加工硅片" :span="2" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">A000031</el-descriptions-item>
                          <el-descriptions-item label="硅片总量" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">3</el-descriptions-item>
                          <el-descriptions-item label="当前电流" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">10A</el-descriptions-item>
                          <el-descriptions-item label="当前速度" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">30m/s</el-descriptions-item>
                          <el-descriptions-item label="当前扭矩" class-name="descriptionsItem"
                            label-class-name="descriptionsItemLabel">60</el-descriptions-item>
                        </el-descriptions>
                      </el-col>
                    </el-row>
                  </swiper-slide>
                </swiper>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="7">
            <div id="qualityChart2" style="height: 208px; width: 100%"></div>
          </el-col>
          <el-col :span="7">
            <div id="qualityChart" style="height: 195px; width: 100%"></div>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>
<style scoped>
.el-main,
.el-row,
.el-col,
.vueflow-box,
.vueflow-box>div {
  width: 100%;
  height: 100%;
  padding-left: 0;
  margin-left: 0;
}

.fullscreen-wrapper {
  width: 100vw;
  height: 100vh;
  background-color: #0a0f1a;
  overflow: hidden;
}

.layout-flow {
  background-color: #0a0f1a;
  min-height: 100vh;
}

.header {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-top {
  display: flex;
  flex-direction: column;
  /* 垂直排列 */
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  right: 10px;
  /* 调整距离右侧的距离 */
  top: 10px;
  /* 调整距离顶部的距离 */
}

.workshop-info {
  color: #00c2ff;
  font-size: 35px;
  font-weight: bold;
  margin-right: 20px;
  background: linear-gradient(to right, #00e5ff, #1e88e5, #42a5f5);
  /* 蓝色渐变 */
  -webkit-background-clip: text;
  /* 让背景渐变应用到文字 */
  color: transparent;
  /* 文字颜色透明，显示渐变背景 */
  transform: translateY(18px);
}

.title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* ✨ 让文字和装饰整体居中 */
}

.title-text {
  font-size: 40px;
  font-weight: bold;
  transform: translateY(15px);
  /* 🔥 让文字整体往下偏移10px */
  background: linear-gradient(to right, #00e5ff, #1e88e5, #42a5f5);
  /* 蓝色渐变 */
  -webkit-background-clip: text;
  /* 让背景渐变应用到文字 */
  color: transparent;
  /* 文字颜色透明，显示渐变背景 */
}


.main-body {
  height: 63vh;
}

.main-row {
  height: 100%;
}

.vueflow-box {
  width: 96.5%;
  height: 103%;
  margin: 0 auto;
  /* 新增的 */
}

.right-panel {
  height: 100%;
  width: 100%;
  /* 确保容器占满父容器宽度 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  /* ✅ 原来是 16px，增大间距 */
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(0, 191, 255, 0.02);
  border-left: 1px solid rgba(0, 191, 255, 0.1);
}


.timebox {
  height: 40px;
  /* 更矮 */
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  font-family: 'Orbitron', 'Consolas', 'Courier New', monospace;
  text-shadow: 0 0 10px #00bfff, 0 0 20px #00bfff;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8%;
  border: 1px solid #00bfff;
  box-shadow: 0 0 12px rgba(0, 191, 255, 0.3);
}

.footer-section {
  height: 28vh;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.02);
  padding: 0 20px 20px 20px;
  display: flex;
  /* 让内部元素按行排列 */
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.gauge-chart-box {
  width: 100%;
  height: 95vh;
  /* 占据视口的 80% 高度 */
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: 5px;  */
  flex-direction: column;
  /* 让标题和图表垂直排列 */
}

.data-card1 {
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 10px;
  background-color: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.1);
  width: 100%;
  height: 400px;
  /* 给卡片一个固定高度 */
  display: block;
  margin-top: 20px;
  /* 调整数值决定下移距离 */
  /* 确保是块级元素 */
}

.data-card {
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 10px;
  background-color: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.1);
  width: 100%;
  height: 200px;
  /* 给卡片一个固定高度 */
  display: block;
  margin-top: 20px;
  /* 调整数值决定下移距离 */
  /* 确保是块级元素 */
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #00ffff;
  font-family: 'Orbitron', 'Consolas', monospace;
  text-shadow: 0 0 4px #00ffff;
  width: auto;
  /* 让文字自动宽度 */
  padding: 0px;
}

.summary-item {
  font-size: 14px;
  color: #00ffff;
  font-family: 'Orbitron', 'Consolas', monospace;
  text-shadow: 0 0 4px #00ffff;
}

.summary-value {
  font-weight: bold;
  color: #ffffff;
  margin-left: 6px;
}

.title-line-text {
  font-size: 18px;
  font-weight: bold;
  color: #00ffff;
  font-family: 'Orbitron', 'Consolas', monospace;
  text-shadow: 0 0 4px #00ffff;
}

.card-value {
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 4px #00ffff;
}

/* 整张卡片 */
.info-card {
  height: 120px;
  background-color: rgba(255, 255, 255, 0.05);
  border: none;
  color: #fff;
}

/* 卡片内部内容区域 */
.info-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 85%;
}

/* 上面的文字标题 */
.info-card-title {
  font-size: 22px;
  color: #00ffff;
  margin-bottom: 8px;
}

/* 下面的大数字 */
.info-card-value {
  font-size: 30px;
  font-weight: bold;
  color: #42b983;
}

.scroll-board {
  width: 100%;
  /* Ensure it takes the full width */
  height: 250px;
  /* Set a fixed height, or it can be adjusted */
  padding: 10px;
  box-sizing: border-box;
}


#qualityChart {
  height: 180px;
  /* 固定高度 */
  width: 98%;
  /* 设置图表宽度为父容器的 90% */
  margin: 10px auto 0;
  /* 设置 margin-top 为 20px，调整位置 */
  border-radius: 12px;
  /* 为图表添加圆角 */
  background-color: rgba(0, 191, 255, 0.05);
  /* 背景颜色 */
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.2);
  /* 添加轻微阴影效果 */
}

/* 使用 ::v-deep 深度选择器覆盖 el-card__header 样式 */
::v-deep .el-card__header {
  padding: 10px 0 !important;
  /* 减少上下内边距 */
  margin: 0 !important;
  /* 去除 margin */
}

:deep(.descriptionsItem) {
  /* 背景透明 */
  background-color: #282c34;
  color: #0f8198 !important;
}

:deep(.descriptionsItemLabel) {
  background-color: #0f2b38 !important;
  color: #0f8198 !important;
}

.custom-span {
  display: inline-flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  padding: 1px 15px;
  /* 控制四周留白（上下2px，左右8px） */
  border: 1px solid #00ced1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  color: #0f8198;
  background-color: transparent;
}

.custom-span-title {
  font-family: 'Orbitron', 'Consolas', 'Courier New', monospace;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  background: linear-gradient(to right, #00ffe7, #0088ff);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
  padding: 4px 12px;
}

.el-descriptions-padding {
  padding-left: 2px;
  padding-right: 2px;
}

.swiper-slide {
  height: 100% !important;
}
</style>
